// 所有的js文件中书写代码，都是全局作用域

// 函数名 fn 可能会导致命名冲突，所在这样开启一个新的作用域不合适
// function fn(){
//   // 局部作用域
//   var n = 1;
// }
// fn();

// 自调用函数 --- 开启一个新的作用域， 避免命名冲突
(function (window) {
  var position = "absolute";
  var element = [];
  // 创建食物的构造函数
  function Food(options) {
    options = options || {};
    this.width = options.width || 20;
    this.height = options.height || 20;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.color = options.color || 'blue';
  }
  Food.prototype.render = function (map) {
    remove();
    this.x = Tools.getRandom(0, map.offsetWidth / this.width - 1) * this.width;
    this.y = Tools.getRandom(0, map.offsetHeight / this.height - 1) * this.height;
    // 动态创建div 页面上显示的食物
    var div = document.createElement('div');
    map.appendChild(div);
    element.push(div)
    // 设置div的样式
    div.style.left = this.x + 'px';
    div.style.top = this.y + 'px';
    div.style.width = this.width + 'px';
    div.style.height = this.height + 'px';
    div.style.position = position;
    div.style.backgroundColor = this.color;
  }

  function remove() {
    for (var i = element.length- 1; i >= 0; i--) {
      // 删除div
      element[i].parentNode.removeChild(element[i]);
      // 删除数组中的元素
      // 删除数组元素
      // 第一个参数，从哪个元素开始删除
      // 第二个参数，删除几个元素
      element.splice(i, 1);

    }
  }
  window.Food = Food;
})(window)


// var map = document.getElementById('map');
// var div = new Food();
// div.render(map);